Dependencies
You can add imports to the top of your Widget code, and they will be available to you in your React component. Types will be automatically added for you if available. Dependencies are from the NPM registry.
Widgets are client-side React components, not server components. This means NPM packages which are for NodeJS will not work (uses NodeJS packages such as fs). Use either browser JS NPM packages, or idempotent packages (environment agnostic packages).
Blotch Library
Before redeveloping existing concepts, have a look at the Blotch Library to see if there is a component or hook which solves your problem. If it doesn't exist, and you feel it should, please raise it as a suggestion in our Forum or Discord for it to be added, so it can benefit us all, and to make the Widget leaner.
Semantic Versioning
It is good practice to pin a specific version of the package you are using. This is because not doing so will always retrieve the latest version of that package. If that package updates to another major version, then the breaking API change for that package may break your Widget.
To pin a dependency, simply add the following suffix at the end of your imported package.
Minor version pinning
This will retrieve the latest patch of the specified major and minor. Equivalent to ~1.2.0 in package.json
@<MAJOR>.<MINOR>
Before
import { format } from "luxon";
import { doWork } from "@company/scoped-dependency";
After
import { format } from "luxon@1.2";
import { doWork } from "@company/scoped-dependency@2.44";
Major version pinning
This will retrieve the latest minor of the specified major. Equivalent to ^1.0.0 in package.json
@<MAJOR>
Before
import { format } from "luxon";
import { doWork } from "@company/scoped-dependency";
After
import { format } from "luxon@1";
import { doWork } from "@company/scoped-dependency@2";
Always try to pin dependencies. This will ensure stability and minimize breaking changes which could occur upstream. There are very little reasons not to do so.